{layout name="public:layout"}
<style type="text/css">
    #qq {
        width: 600px;
        height: 170px;
        background: #fff;
        margin: 10px auto 30px;
        border-radius: 5px;
    }

    #qq p {
        font-size: 12px;
        color: #666;
        font-family: "微软雅黑";
        line-height: 45px;
        text-indent: 20px;
    }
    .message {
        width: 560px;
        height: 70px;
        overflow: hidden;
        outline: none;
        border: 1px solid #ddd;
        padding: 8px;
        box-sizing: border-box;
        font-size: 14px;
        -webkit-background-clip: text;
        color: transparent;
        background-image: linear-gradient(to right, #778899 0%, #333 100%);
    }
    #qq .But {
        width: 560px;
        height: 35px;
        margin: 15px auto 0px;
        position: relative;
        /*相对，参考对象*/
    }

    #qq .But img.bq {
        float: left;
        /*左浮动*/
    }

    #qq .But span.submit {
        width: 80px;
        height: 30px;
        background: #ff8140;
        display: block;
        float: right;
        /*右浮动*/
        line-height: 30px;
        border-radius: 5px;
        cursor: pointer;
        /*手指*/
        color: #fff;
        font-size: 12px;
        text-align: center;
        font-family: "微软雅黑";
    }

    /*face begin*/
    #qq .But .face {
        width: 440px;
        background: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 0 12px #666;
        position: absolute;
        /*绝对定位*/
        top: 21px;
        left: 15px;
        display: none;
        /*隐藏*/
    }

    #qq .But .face ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        box-sizing: border-box;
    }

    #qq .But .face ul li {
        width: 30px;
        height: 30px;
        list-style-type: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>
<!-- 警告框 -->
<div class="alert fade" style="display: none; z-index: 3; position: fixed; top: 250px; left: 50%; width: 400px; margin-left: -200px">
    <div class="alertMsg text-center"></div>
</div>

<h3 class="text-success bg-success" style="padding: 10px;">{$title|default="默认标题"}</h3>

<div id="addMoodForm">
    <div id="qq" class="col-sm-12">
        <p>有什么新鲜事想告诉大家?</p>
        <div class="message" contentEditable='true'></div>
        <div class="But">
            <img src="/static/moodinput/bba_thumb.gif" class='bq' />
            <span id="addMoodBtn" class='submit'>发表</span>
            <!--face begin-->
            <div class="face">
                <ul>
                    <li><img src="/static/moodinput/smilea_thumb.gif" title="呵呵]"></li>
                    <li><img src="/static/moodinput/tootha_thumb.gif" title="嘻嘻]"></li>
                    <li><img src="/static/moodinput/laugh.gif" title="[哈哈]"></li>
                    <li><img src="/static/moodinput/tza_thumb.gif" title="[可爱]"></li>
                    <li><img src="/static/moodinput/kl_thumb.gif" title="[可怜]"></li>
                    <li><img src="/static/moodinput/kbsa_thumb.gif" title="[挖鼻屎]"></li>
                    <li><img src="/static/moodinput/cj_thumb.gif" title="[吃惊]"></li>
                    <li><img src="/static/moodinput/shamea_thumb.gif" title="[害羞]"></li>
                    <li><img src="/static/moodinput/zy_thumb.gif" title="[挤眼]"></li>
                    <li><img src="/static/moodinput/bz_thumb.gif" title="[闭嘴]"></li>
                    <li><img src="/static/moodinput/bs2_thumb.gif" title="[鄙视]"></li>
                    <li><img src="/static/moodinput/lovea_thumb.gif" title="[爱你]"></li>
                    <li><img src="/static/moodinput/sada_thumb.gif" title="[泪]"></li>
                    <li><img src="/static/moodinput/heia_thumb.gif" title="[偷笑]"></li>
                    <li><img src="/static/moodinput/qq_thumb.gif" title="[亲亲]"></li>
                    <li><img src="/static/moodinput/sb_thumb.gif" title="[生病]"></li>
                    <li><img src="/static/moodinput/mb_thumb.gif" title="[太开心]"></li>
                    <li><img src="/static/moodinput/ldln_thumb.gif" title="[懒得理你]"></li>
                    <li><img src="/static/moodinput/yhh_thumb.gif" title="[右哼哼]"></li>
                    <li><img src="/static/moodinput/zhh_thumb.gif" title="[左哼哼]"></li>
                    <li><img src="/static/moodinput/x_thumb.gif" title="[嘘]"></li>
                    <li><img src="/static/moodinput/cry.gif" title="[衰]"></li>
                    <li><img src="/static/moodinput/wq_thumb.gif" title="[委屈]"></li>
                    <li><img src="/static/moodinput/t_thumb.gif" title="[吐]"></li>
                    <li><img src="/static/moodinput/k_thumb.gif" title="[打哈气]"></li>
                    <li><img src="/static/moodinput/bba_thumb.gif" title="[抱抱]"></li>
                    <li><img src="/static/moodinput/angrya_thumb.gif" title="[怒]"></li>
                    <li><img src="/static/moodinput/yw_thumb.gif" title="[疑问]"></li>
                    <li><img src="/static/moodinput/cza_thumb.gif" title="[馋嘴]"></li>
                    <li><img src="/static/moodinput/88_thumb.gif" title="[拜拜]"></li>
                    <li><img src="/static/moodinput/sk_thumb.gif" title="[思考]"></li>
                    <li><img src="/static/moodinput/sweata_thumb.gif" title="[汗]"></li>
                    <li><img src="/static/moodinput/sleepya_thumb.gif" title="[困]"></li>
                    <li><img src="/static/moodinput/sleepa_thumb.gif" title="[睡觉]"></li>
                    <li><img src="/static/moodinput/money_thumb.gif" title="[钱]"></li>
                    <li><img src="/static/moodinput/sw_thumb.gif" title="[失望]"></li>
                    <li><img src="/static/moodinput/cool_thumb.gif" title="[酷]"></li>
                    <li><img src="/static/moodinput/hsa_thumb.gif" title="[花心]"></li>
                    <li><img src="/static/moodinput/hatea_thumb.gif" title="[哼]"></li>
                    <li><img src="/static/moodinput/gza_thumb.gif" title="[鼓掌]"></li>
                    <li><img src="/static/moodinput/dizzya_thumb.gif" title="[晕]"></li>
                    <li><img src="/static/moodinput/bs_thumb.gif" title="[悲伤]"></li>
                    <li><img src="/static/moodinput/crazya_thumb.gif" title="[抓狂]"></li>
                    <li><img src="/static/moodinput/h_thumb.gif" title="[黑线]"></li>
                    <li><img src="/static/moodinput/yx_thumb.gif" title="[阴险]"></li>
                    <li><img src="/static/moodinput/nm_thumb.gif" title="[怒骂]"></li>
                    <li><img src="/static/moodinput/hearta_thumb.gif" title="[心]"></li>
                    <li><img src="/static/moodinput/unheart.gif" title="[伤心]"></li>
                    <li><img src="/static/moodinput/pig.gif" title="[猪头]"></li>
                    <li><img src="/static/moodinput/ok_thumb.gif" title="[ok]"></li>
                    <li><img src="/static/moodinput/ye_thumb.gif" title="[耶]"></li>
                    <li><img src="/static/moodinput/good_thumb.gif" title="[good]"></li>
                    <li><img src="/static/moodinput/no_thumb.gif" title="[不要]"></li>
                    <li><img src="/static/moodinput/z2_thumb.gif" title="[赞]"></li>
                    <li><img src="/static/moodinput/come_thumb.gif" title="[来]"></li>
                    <li><img src="/static/moodinput/sad_thumb.gif" title="[弱]"></li>
                    <li><img src="/static/moodinput/lazu_thumb.gif" title="[蜡烛]"></li>
                    <li><img src="/static/moodinput/clock_thumb.gif" title="[钟]"></li>
                    <li><img src="/static/moodinput/cake.gif" title="[蛋糕]"></li>
                    <li><img src="/static/moodinput/m_thumb.gif" title="[话筒]"></li>
                    <li><img src="/static/moodinput/weijin_thumb.gif" title="[围脖]"></li>
                    <li><img src="/static/moodinput/lxhzhuanfa_thumb.gif" title="[转发]"></li>
                    <li><img src="/static/moodinput/lxhluguo_thumb.gif" title="[路过这儿]"></li>
                    <li><img src="/static/moodinput/bofubianlian_thumb.gif" title="[bofu变脸]"></li>
                    <li><img src="/static/moodinput/gbzkun_thumb.gif" title="[gbz困]"></li>
                    <li><img src="/static/moodinput/boboshengmenqi_thumb.gif" title="[生闷气]"></li>
                    <li><img src="/static/moodinput/chn_buyaoya_thumb.gif" title="[不要啊]"></li>
                    <li><img src="/static/moodinput/daxiongleibenxiong_thumb.gif" title="[dx泪奔]"></li>
                    <li><img src="/static/moodinput/cat_yunqizhong_thumb.gif" title="[运气中]"></li>
                    <li><img src="/static/moodinput/youqian_thumb.gif" title="[有钱]"></li>
                </ul>
            </div>
            <!--face end-->
        </div>
    </div>
    <input type="hidden" name="create_person_id" value="{$Think.session.admin_id}">
    <input type="hidden" name="update_person_id" value="{$Think.session.admin_id}">
</div>

<table style="margin-top: 10px;" class="table table-default table-hover text-center table-bordered">
    <tr>
        <td>#</td>
        <td>内容</td>
        <td>时间</td>
        <td>状态</td>
        <td>操作</td>
    </tr>
    {volist name="moodList" id="mood" empty="$empty"}
    <tr>
        <td>{$mood.id}</td>
        <td>{$mood.content|raw}</td>
        <td>{$mood.update_time|date='Y-m-d H:i'}</td>
        <td>
            {eq name="$mood.status" value="1"}
            <span class="text-primary">已启用</span>
            <button
                    moodId="{$mood.id}"
                    moodStatus="0"
                    class="btn btn-danger btn-xs stopUseBtn">
                禁用
            </button>
            {else/}
            <span class="text-danger">已禁用</span>
            <button
                    moodId="{$mood.id}"
                    moodStatus="1"
                    class="btn btn-primary btn-xs recoverUseBtn">
                启用
            </button>
            {/eq}
        </td>
        <td>
            <button
                    class="btn btn-danger btn-xs deleMoodBtn"
                    moodId="{$mood.id}"
                    title="删除">
                <i class="iconfont icon-shanchu"></i>
            </button>
        </td>
    </tr>
    {/volist}
</table>

<!-- 删除栏目模态框 -->
<div id="deleMoodModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">删除记录</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger" role="alert">
                    删除将使该心情信息从数据库中被彻底删除且不可恢复
                </div>
                <form class="form-horizontal" action="" method="" id="deleMoodForm">
                    <input type="hidden" name="adminId" value="{$Think.session.admin_id}">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">管理员密码:</label>
                        <div class="col-sm-7">
                            <input name="adminPsw" type="password" class="form-control" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-6">
                            <button type="button" class="btn btn-primary" id="deleMoodBtn1">确定</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div style="text-align: center">
    {$moodList|raw}
</div>

<script type="text/javascript">
    // 封装警告框方法
    function showAlert(alertStyle, alertText, alertTime) {
        $('.alert').css('display', 'block');
        $('.alert').addClass(alertStyle);
        $('.alertMsg').text(alertText);
        $('.alert').removeClass('fade').addClass('in');
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                $('.alert').addClass('fade').removeClass('in');
                $('.alert').css('display', 'none');
                resolve();
            }, alertTime)
        })
    }
    $(function () {
        var moodId = 0;
        //点击小图片，显示表情
        $(".bq").click(function (e) {
            $(".face").slideDown(); //慢慢向下展开
            e.stopPropagation(); //阻止冒泡事件
        });

        //在桌面任意地方点击，关闭表情框
        $(document).click(function () {
            $(".face").slideUp(); //慢慢向上收
        });

        //点击小图标时，添加功能
        $(".face ul li").click(function () {
            let simg = $(this).find("img").clone();
            $(".message").append(simg); //将表情添加到输入框
        });

        //点击发表按扭，发表内容
        $("span.submit").click(function () {
            let txt = $(".message").html(); //获取输入框内容
            if (!txt) {
                $('.message').focus(); //自动获取焦点
                return;
            }
            $.ajax({
                type: 'post',
                url: "{:url('mood/updateMood')}",
                dataType: 'json',
                data: {
                    type: 1,
                    create_person_id: $("#addMoodForm input[name='create_person_id']").val(),
                    update_person_id: $("#addMoodForm input[name='update_person_id']").val(),
                    content: txt
                },
                success: function (data) {
                    switch (data.status) {
                        case 1:
                            showAlert('alert-success', data.msg, 1000).then(function() {
                                window.location.href="{:url('mood/getMoodList')}";
                            });
                            break;
                        case 0:
                        case -1:
                            showAlert('alert-danger', data.msg, 1000);
                            break;
                        default:
                            showAlert('alert-danger', data.msg, 1000);
                            break;
                    }
                }
            })
            $('.message').html('') // 清空输入框

        });

        // 模态框关闭后重置
        $('#deleMoodModal').on('hidden.bs.modal', function (e) {
            $("#deleMoodForm input[name='adminPsw']").val('')
        })

        // 显示删除模态框
        $('.deleMoodBtn').on('click', function () {
            moodId = $(this).attr('moodId');
            $('#deleMoodModal').modal('show');
        })

        // 删除操作
        $('#deleMoodBtn1').on('click', function () {
            $('#deleMoodModal').modal('hide');
            if ('' == $("#deleMoodForm input[name='adminPsw']").val()) {
                showAlert('alert-danger', '密码不能为空', 1000)
                return
            }
            $.ajax({
                type: 'post',
                url: "{:url('mood/deleMood')}",
                dataType: 'json',
                data: {
                    adminId: $("#deleMoodForm input[name='adminId']").val(),
                    adminPsw: $("#deleMoodForm input[name='adminPsw']").val(),
                    moodId: moodId
                },
                success: function (data) {
                    if (1 == data.status) {
                        showAlert('alert-success', data.msg, 800).then(function () {
                            window.location.href="{:url('mood/getMoodList')}";
                        });
                    } else {
                        showAlert('alert-danger', data.msg, 800);
                    }
                }
            })
        })

        $('.recoverUseBtn').on('click', function () {
            var moodId = $(this).attr('moodId');
            var moodStatus = $(this).attr('moodStatus');
            $.ajax({
                type: 'post',
                url: "{:url('mood/updateMoodStatus')}",
                dataType: 'json',
                data: {
                    id: moodId,
                    status: moodStatus
                },
                success: function (data) {
                    switch (data.status) {
                        case 1:
                            showAlert('alert-success', data.msg, 1000).then(function () {
                                window.location.href="{:url('mood/getMoodList')}";
                            });
                            break;
                        case 0:
                        case -1:
                            showAlert('alert-danger', data.msg, 2000)
                            break;
                        default:
                            showAlert('alert-danger', data.msg, 2000)
                            break;
                    }
                }

            })
        })

        $('.stopUseBtn').on('click', function () {
            var moodId = $(this).attr('moodId');
            var moodStatus = $(this).attr('moodStatus');
            $.ajax({
                type: 'post',
                url: "{:url('mood/updateMoodStatus')}",
                dataType: 'json',
                data: {
                    id: moodId,
                    status: moodStatus
                },
                success: function (data) {
                    switch (data.status) {
                        case 1:
                            showAlert('alert-success', data.msg, 1000).then(function () {
                                window.location.href="{:url('mood/getMoodList')}";
                            });
                            break;
                        case 0:
                        case -1:
                            showAlert('alert-danger', data.msg, 2000)
                            break;
                        default:
                            showAlert('alert-danger', data.msg, 2000)
                            break;
                    }
                }

            })
        })
    })
</script>